<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险评估管理</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-size: 0.875rem; /* 14px */
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            font-size: 0.875rem; /* 14px */
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease-in-out;
            font-size: 0.875rem; /* 14px */
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .table {
            font-size: 0.8125rem; /* 13px */
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn {
            font-size: 0.8125rem; /* 13px */
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #5c636a;
            border-color: #565e64;
        }
        .pagination .page-link {
            color: #0d6efd;
            font-size: 0.8125rem; /* 13px */
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            font-size: 0.875rem; /* 14px */
        }
        .modal-header {
            background-color: #f8f9fa;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h2 {
            color: #2c3e50;
            font-weight: 600;
            font-size: 1.25rem; /* 20px */
        }
        .form-control, .form-select {
            border-radius: 8px;
            font-size: 0.875rem; /* 14px */
        }
        .form-label {
            font-size: 0.8125rem; /* 13px */
        }
        .risk-level-1 {
            background-color: #d1ecf1;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-2 {
            background-color: #e2e3e5;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-3 {
            background-color: #fff3cd;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-4 {
            background-color: #f8d7da;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-5 {
            background-color: #dc3545;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <script src="riskAssessment.js?v=1.0.0"></script>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-bank"></i> 个人投资管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">

                    <li class="nav-item">
                        <a class="nav-link" href="fund.html">标的管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="portfolio.html">投资组合</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="transaction.html">交易记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentGoal.html">投资目标</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentDiary.html">投资日记</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="riskAssessment.html">风险评估</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="taxCalculation.html">税务计算</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        
        <!-- 查询条件 -->
        <div class="card mb-4">
            <div class="card-header">查询条件</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" id="searchFundCode" placeholder="请输入标的代码">
                    </div>
                    <div class="col-md-3 mb-3">
                        <select class="form-select" id="searchPortfolioId">
                            <option value="">全部组合</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <select class="form-select" id="searchRiskLevel">
                            <option value="">全部风险等级</option>
                            <option value="1">低风险</option>
                            <option value="2">中低风险</option>
                            <option value="3">中风险</option>
                            <option value="4">中高风险</option>
                            <option value="5">高风险</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center">
                        <button class="btn btn-primary me-2" id="fetchRiskAssessmentsButton">
                            <i class="bi bi-search"></i> 查询
                        </button>
                        <button class="btn btn-primary" id="addRiskAssessmentButton" data-bs-toggle="modal" data-bs-target="#addRiskAssessmentModal">
                            <i class="bi bi-plus-circle"></i> 新增评估
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="riskAssessmentTable" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>标的代码</th>
                                <th>投资组合</th>
                                <th>风险等级</th>
                                <th>波动率</th>
                                <th>最大回撤</th>
                                <th>夏普比率</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="riskAssessmentTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div id="pagination" class="d-flex justify-content-between">
            <div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <select class="form-select" id="itemsPerPage">
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </li>
                        <li class="page-item" id="prevPage">
                            <a class="page-link" tabindex="-1" aria-disabled="true" id="pPage">上一页</a>
                        </li>
                        <li class="page-item">
                            <span class="page-link">
                                第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页
                            </span>
                        </li>
                        <li class="page-item" id="nextPage">
                            <a class="page-link" id="nPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 新增评估模态框 -->
    <div class="modal fade" id="addRiskAssessmentModal" tabindex="-1" aria-labelledby="addRiskAssessmentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRiskAssessmentModalLabel">新增风险评估</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addRiskAssessmentForm">
                        <div class="mb-3">
                            <label for="addFundCode" class="form-label">标的代码</label>
                            <input type="text" class="form-control" id="addFundCode">
                        </div>
                        <div class="mb-3">
                            <label for="addPortfolioId" class="form-label">投资组合</label>
                            <select class="form-select" id="addPortfolioId">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="addRiskLevel" class="form-label">风险等级</label>
                            <select class="form-select" id="addRiskLevel" required>
                                <option value="">请选择</option>
                                <option value="1">低风险</option>
                                <option value="2">中低风险</option>
                                <option value="3">中风险</option>
                                <option value="4">中高风险</option>
                                <option value="5">高风险</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="addVolatility" class="form-label">波动率</label>
                            <input type="number" class="form-control" id="addVolatility" step="0.0001">
                        </div>
                        <div class="mb-3">
                            <label for="addMaxDrawdown" class="form-label">最大回撤</label>
                            <input type="number" class="form-control" id="addMaxDrawdown" step="0.0001">
                        </div>
                        <div class="mb-3">
                            <label for="addSharpeRatio" class="form-label">夏普比率</label>
                            <input type="number" class="form-control" id="addSharpeRatio" step="0.0001">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveAddRiskAssessment">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑评估模态框 -->
    <div class="modal fade" id="editRiskAssessmentModal" tabindex="-1" aria-labelledby="editRiskAssessmentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editRiskAssessmentModalLabel">编辑风险评估</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editRiskAssessmentForm">
                        <input type="hidden" id="editRiskAssessmentId">
                        <div class="mb-3">
                            <label for="editFundCode" class="form-label">标的代码</label>
                            <input type="text" class="form-control readonly-field" id="editFundCode" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="editPortfolioId" class="form-label">投资组合</label>
                            <select class="form-select" id="editPortfolioId">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editRiskLevel" class="form-label">风险等级</label>
                            <select class="form-select" id="editRiskLevel" required>
                                <option value="1">低风险</option>
                                <option value="2">中低风险</option>
                                <option value="3">中风险</option>
                                <option value="4">中高风险</option>
                                <option value="5">高风险</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editVolatility" class="form-label">波动率</label>
                            <input type="number" class="form-control" id="editVolatility" step="0.0001">
                        </div>
                        <div class="mb-3">
                            <label for="editMaxDrawdown" class="form-label">最大回撤</label>
                            <input type="number" class="form-control" id="editMaxDrawdown" step="0.0001">
                        </div>
                        <div class="mb-3">
                            <label for="editSharpeRatio" class="form-label">夏普比率</label>
                            <input type="number" class="form-control" id="editSharpeRatio" step="0.0001">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveEditRiskAssessment">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义模态框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-labelledby="customAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customAlertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="customAlertMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                        <i class="bi bi-check-circle"></i> 确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面级CSS -->
    <style>
        body {
            background-color: #f8f9fa;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease-in-out;
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #5c636a;
            border-color: #565e64;
        }
        .pagination .page-link {
            color: #0d6efd;
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .modal-header {
            background-color: #f8f9fa;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h2 {
            color: #2c3e50;
            font-weight: 600;
        }
        .form-control, .form-select {
            border-radius: 8px;
        }
        .risk-level-1 {
            background-color: #d1ecf1;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-2 {
            background-color: #e2e3e5;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-3 {
            background-color: #fff3cd;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-4 {
            background-color: #f8d7da;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .risk-level-5 {
            background-color: #dc3545;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
        }
    </style>
    
    <script src="riskAssessment.js?v=1.0.0"></script>
</body>
</html>